<template>
  <div>
    <div class="foot">
      <div>
        <div class="left">
          <div class="plink">
            <ul>
              <li v-for="(item, index) in footList.aboutList" :key="item" @click="jump(index)">{{item}}</li>
            </ul>
            <ul @click="jump(5)" v-if="isShowNews">
              <li v-for="item in footList.newsList.slice(0, 3)" :key="item">{{item}}</li>
            </ul>
            <ul @click="jump(6)">
              <li v-for="item in footList.productList.slice(0,1)" :key="item">{{item}}</li>
            </ul>
            <ul @click="jump(7)">
              <li v-for="item in footList.yanfaList" :key="item">{{item}}</li>
            </ul>
            <ul>
              <li v-for="(item, index) in footList.rencaiList" :key="item" @click="rencai(index)">{{item}}</li>
            </ul>
            <ul @click="jump(8)">
              <li v-for="item in footList.lianxiList.slice(0, 2)" :key="item">{{item}}</li>
            </ul>
          </div>
          <span>{{footList.note}}</span>
        </div>
        <div class="right">
          <img src="@/assets/ewm.png" alt="">
          <span class="a">{{footList.msg}}</span>
          <div>
            <span class="b">{{footList.phone}}</span>
            <span class="c">400-800-6276</span>
          </div>
        </div>
      </div>
    </div>
    <div class="beian">
      {{footList.record1}}<a href="http://www.miitbeian.gov.cn" target="_blank">{{footList.record2}}</a>{{footList.record3}}
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'vFooter',
  data () {
    return {
      newsList: [],
      productList: [],
      yanfaList: [],
      zannueList: [],
      lianxiList: [],
      isShowNews: true
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'footList': 'footList'
    })
  },
  methods: {
    jump (type) {
      if (type === 0 || type === 1) {
        this.$router.push('/jianjie')
      }
      if (type === 2) {
        this.$router.push('/chanye')
      }
      if (type === 3) {
        this.$router.push('/licheng')
      }
      if (type === 4) {
        this.$router.push('/wenhua')
      }
      if (type === 5) {
        this.$router.push('/news')
      }
      if (type === 6) {
        this.$router.push('/product')
      }
      if (type === 7) {
        this.$router.push('/yanfa')
      }
      if (type === 8) {
        this.$router.push('/lianxi')
      }
    },
    rencai (type) {
      if (type === 0 || type === 1) {
        this.$router.push('/society')
      }
      if (type === 2) {
        this.$router.push('/school')
      }
    },
    _getChList () {
      this.isShowNews = true
    },
    _getEnList () {
      this.isShowNews = false
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
      }
      if (this.lang === 2) {
        this._getEnList()
      }
    }
  },
  watch: {
    lang (newVal, oldVal) {
      if (newVal === 1) {
        this._getChList()
      }
      if (newVal === 2) {
        this._getEnList()
      }
    }
  },
  created () {
    console.log('版本号' + this.lang)
    this.version()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .foot {
    width: 100%;
    height: 389px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin-top: 83px;
    >div {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      width: 1200px;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 303px;
        .plink {
          display: flex;
          ul {
            list-style: none;
            width: 130px;
            li {
              font-size: 14px;
              letter-spacing: 0px;
              color: #666;
              margin-bottom: 15px;
              cursor: pointer
            }
            li:hover {
              color: #2154b9
            }
            li:first-child {
              font-size: 16px;
              color: #333;
              font-weight: bolder;
              margin-bottom: 27px;
              // cursor: auto;
              color: #666
            }
          }
        }
        span {
          font-size: 16px;
          line-height: 48px;
          letter-spacing: 0px;
          color: #2154b9;
          margin-top: 28px;
          display: block;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        div {
          display: flex;
          align-items: center;
        }
        span.a {
          font-size: 18px;
          letter-spacing: 3px;
          color: #999;
          margin-top: 18px;
          margin-bottom: 37px;
        }
        span.b {
          font-size: 18px;
          font-weight: bolder;
          letter-spacing: 2px;
          color: #2154b9;
        }
        span.c {
          font-size: 30px;
          letter-spacing: 3px;
          font-weight: bolder;
          color: #2154b9;
          margin-left: 5px
          // margin-top: 28px
        }
      }
    }
  }
  .beian {
    width: 100%;
    height: 61px;
    background-color: #2154b9;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 61px;
    letter-spacing: 1px;
    a {
      text-decoration: none;
      color: #fff
    }
  }
</style>
